import React, { Component } from 'react'

import { Spring,animated  } from 'react-spring';

import FilterTitle from '../FilterTitle'
import FilterPicker from '../FilterPicker'
import FilterMore from '../FilterMore'

import styles from './index.module.css'

import { API } from '../../../../utils/api'
import { object } from 'prop-types'
// 标题高亮状态
// true 表示高亮； false 表示不高亮
const titleSelectedStatus = {
  area: false,
  mode: false,
  price: false,
  more: false
}

const selectedValues = {
  area: ['area', 'null'],
  mode: ['null'],
  price: ['null'],
  more: []
}


export default class Filter extends Component {
  state = {
    titleSelectedStatus,
    openType: '',
    filterData: {},
    selectedValues
  }

  componentDidMount() {
    this.htmlbody = document.body
    this.getFilterData()
  }

  renderFilterData() {
    const {
      openType,
      filterData: { area, subway, rentType, price },
      selectedValues
    } = this.state
    if (openType !== 'area' && openType !== 'mode' && openType !== 'price') {
      return null
    }
    let data = []
    let cols = 3
    let defaultValue = selectedValues[openType]
    switch (openType) {
      case 'area':
        data = [area, subway]
        cols = 3
        console.log(data);
        break;
      case 'mode':
        data = rentType
        cols = 1
        console.log(data);
        break;
      case 'price':
        data = price
        cols = 1
        break;
      default:
        break;

    }
    return (<FilterPicker
      key={openType}
      onCancel={this.onCancel}
      onSave={this.onSave}
      data={data}
      cols={cols}
      type={openType}
      defaultValue={defaultValue}
    />)
  }

  async getFilterData() {
    const { value } = JSON.parse(localStorage.getItem('hkzf_city'))
    const res = await API.get(`/houses/condition?id=${value}`)
    this.setState({
      filterData: res.data.body
    })
    console.log(this.state.filterData);
  }


  onTitleClick = type => {
    this.htmlbody.className = 'body-fixed'
    const { titleSelectedStatus, selectedValues } = this.state
    const newtitleSelectedStatus = { ...titleSelectedStatus }

    Object.keys(titleSelectedStatus).forEach(key => {
      if (key === type) {
        newtitleSelectedStatus[type] = true
        return
      }

      const selectedVal = selectedValues[key]
      if (key === 'area' && (selectedVal.length !== 2 || selectedVal[0] !== 'area')) {
        newtitleSelectedStatus[type] = true
      } else if (key == 'mode' && selectedVal[0] !== 'null') {
        newtitleSelectedStatus[type] = true
      } else if (key == 'price' && selectedVal[0] !== 'null') {
        newtitleSelectedStatus[type] = true
      } else if (key == 'more' && selectedVal.length !== 0) {
        newtitleSelectedStatus[type] = true
      } else {
        newtitleSelectedStatus[type] = false
      }
    });
    console.log(newtitleSelectedStatus)



    this.setState({
      openType: type,
      titleSelectedStatus: newtitleSelectedStatus
    })
  }

  //取消
  onCancel = (type) => {
    this.htmlbody.className = ''
    console.log('取消', type)
    const { titleSelectedStatus } = this.state
    const newtitleSelectedStatus = { ...titleSelectedStatus }

    const selectedVal = selectedValues[type]
    if (type === 'area' && (selectedVal.length !== 2 || selectedVal[0] !== 'area')) {
      newtitleSelectedStatus[type] = true
    } else if (type == 'mode' && selectedVal[0] !== 'null') {
      newtitleSelectedStatus[type] = true
    } else if (type == 'price' && selectedVal[0] !== 'null') {
      newtitleSelectedStatus[type] = true
    } else if (type == 'more' && selectedVal.length !== 0) {
      newtitleSelectedStatus[type] = true
    } else {
      newtitleSelectedStatus[type] = false
    }

    this.setState({
      openType: '',
      titleSelectedStatus: newtitleSelectedStatus
    })
  }

  //保存
  onSave = (type, value) => {
    this.htmlbody.className = ''
    const { titleSelectedStatus } = this.state
    const newtitleSelectedStatus = { ...titleSelectedStatus }

    const selectedVal = value
    if (type === 'area' && (selectedVal.length !== 2 || selectedVal[0] !== 'area')) {
      newtitleSelectedStatus[type] = true
    } else if (type == 'mode' && selectedVal[0] !== 'null') {
      newtitleSelectedStatus[type] = true
    } else if (type == 'price' && selectedVal[0] !== 'null') {
      newtitleSelectedStatus[type] = true
    } else if (type == 'more' && selectedVal.length !== 0) {
      newtitleSelectedStatus[type] = true
    } else {
      newtitleSelectedStatus[type] = false
    }

    const newSelectedValues = {
      ...this.state.selectedValues,
      [type]: value
    }


    const { area, mode, price, more } = newSelectedValues
    const fiters = {}
    const areakey = area[0]
    let areaValue = 'null'
    if (area.length === 3) {
      areaValue = area[2] != 'null' ? area[2] : area[1]
    }

    fiters[areakey] = areaValue

    fiters.mode = mode[0]
    fiters.price = price[0]
    fiters.more = more.join(',')
    console.log('筛选数据', fiters)
    this.props.onFilter(fiters)


    this.setState({
      openType: '',
      titleSelectedStatus: newtitleSelectedStatus,
      selectedValues: newSelectedValues
    })
  }

  renderFilterMore() {
    const {
      openType,
      selectedValues,
      filterData: { roomType, oriented, floor, characteristic }
    } = this.state
    if (openType !== 'more') {
      return null
    }

    const data = {
      roomType,
      oriented,
      floor,
      characteristic
    }

    const defaultValue = selectedValues.more
    return <FilterMore
      data={data}
      type={openType}
      defaultValue={defaultValue}
      onSave={this.onSave}
      onCancel={this.onCancel} />
  }

  render() {
    const { titleSelectedStatus, openType } = this.state

    return (
      <div className={styles.root}>
        {/* 前三个菜单的遮罩层 */}
        {/* <div className={styles.mask} /> */}
        {
          openType == 'area' || openType == 'mode' || openType == 'price' ?

            (<Spring from={{ opacity: 0 }} to={{ opacity:1 }}>
              {props => {
                console.log(props);
                return (
                  <animated.div
                    style={props}
                    className={styles.mask}
                    onClick={() => this.onCancel(openType)}
                  />
                )
              }}
            </Spring>) : null
        }
        <div className={styles.content}>
          {/* 标题栏 */}
          <FilterTitle
            titleSelectedStatus={titleSelectedStatus}
            onClick={this.onTitleClick}
          />

          {/* 前三个菜单对应的内容： */}

          {this.renderFilterData()}
          {/* 最后一个菜单对应的内容： */}
          {this.renderFilterMore()}
        </div>
      </div>
    )
  }
}
